<div class="hero-unit" style="height:260px;">
    <h2>Welcome to Backbone Directory !</h2>

    <p>&nbsp;</p>

    <img src="img/logo.png" alt="" width="300" height="200" style="float:left">

    <p style="padding-top:50px;padding-left:340px;">This is a sample app that demonstrates how to build applications
        with <a href="http://documentcloud.github.com/backbone/">Backbone.js</a> and <a
                href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a>.
        <br/><br/> <a class="btn btn-primary btn-large" href="http://coenraets.org">Learn more &raquo;</a>
    </p>

</div>

<div class="row">
    <div class="span4">
        <h2>Try It</h2>

        <p>Enter a few characters in the Search Box in the upper right corner of the screen, and select an employee. In
            the Employee view, you can navigate up and down the Org Chart by clicking either the Manager link,
            or one of the Direct Reports in the sidebar on the right of the screen.</p>

        <p><a id="showMeBtn" class="btn" href="#">Show Me &raquo;</a></p>
    </div>
    <div class="span4">
        <h2>Get It</h2>

        <p>The source code for this application is maintained in <a
                href="https://github.com/ccoenraets/backbone-directory">this repository</a> on GitHub. In addition
            to the Backbone.js- and Twitter Bootstrap-powered client, the repository includes two versions of the
            back-end services: a Java and a PHP implementation.</p>

        <p><a class="btn" href="https://github.com/ccoenraets/backbone-directory/zipball/master">Download &raquo;</a></p>
    </div>
    <div class="span4">
        <h2>Share It</h2>

        <p>If you think this sample is helpful, let other people know about it...
            <br/>

        <p>
            <a href="https://twitter.com/share" class="twitter-share-button" data-via="ccoenraets" data-size="large">Tweet</a>
        </p>
        <script>
            !function (d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (!d.getElementById(id)) {
                    js = d.createElement(s);
                    js.id = id;
                    js.src = "//platform.twitter.com/widgets.js";
                    fjs.parentNode.insertBefore(js, fjs);
                }
            }(document, "script", "twitter-wjs");
        </script>

        <p>
            <g:plusone size="medium"></g:plusone>
            <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        </p>

        <div class="fb-like" data-href="http://coenraets.org/directory" data-send="false" data-layout="button_count"
             data-width="450" data-show-faces="false" data-action="recommend"></div>
        <!-- Facebook -->
        <div id="fb-root"></div>
        <script>(function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=131255884255";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
        <!-- End Facebook -->

        </p>
    </div>
</div>